<template>
  <v-app>
    <!-- 左侧导航栏 -->
    <v-navigation-drawer permanent>
      <v-list>
        <v-list-item title="演示"></v-list-item>
      </v-list>
      <v-divider></v-divider>
      <v-list density="compact" nav>
        <v-list-item prepend-icon="mdi-home" title="首页" value="home" to="/"></v-list-item>
        <v-list-item prepend-icon="mdi-robot" title="AI 智能问答" value="ai-query" to="/ai-query"></v-list-item>
        <!-- 其他导航项可以后续添加 -->
        <v-list-item prepend-icon="mdi-code-braces" title="代码运行器" value="code-runner" to="/code-runner"></v-list-item>
        <v-list-item prepend-icon="mdi-atom" title="智能体任务" value="agent-task" to="/agent-task"></v-list-item>
        <v-list-item prepend-icon="mdi-content-copy" title="网页克隆1" value="web-clone1" to="/web-clone1"></v-list-item>
        <v-list-item prepend-icon="mdi-content-copy" title="网页克隆2" value="web-clone2" to="/web-clone2"></v-list-item>
      </v-list>
    </v-navigation-drawer>

    <!-- 主内容区 -->
    <v-main>
      <!-- 使用 v-container 提供合适的边距 -->
      <v-container fluid>
        <RouterView />
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import { RouterView } from 'vue-router';
</script>

<style>
/* Vuetify 接管了大部分样式，全局 CSS 可以大大减少 */
body {
  font-family: "Roboto", sans-serif;
}
</style>